<template>
	<view class="dissFixed">
		<!--start 底部悬浮框评论-->
		<view class="bottom_fixed">
			<view class="wrap">
				<view class="inpit_wrap">
					<text class="uniicons">&#xe203;</text>
					<view @click="openSend({tie:true,placeholder: '说说你的想法'})" class="input">
						说说你的想法
					</view>
				</view>
				<view class="right">
					<text class="icon">
						<text class="uniicons">&#xe263;</text>
						<text class="num" v-if="setReplyNum">{{setReplyNum}}</text>
					</text>
					<text class="icon">
						<text class="uniicons" :class="[hasPraise ? 'active' : '']" @click="thumup">&#xe83f;</text>
						<text class="num" v-if="setPraiseNum">{{setPraiseNum}}</text>
					</text>
				</view>
			</view>
		</view>
		<!--end 底部悬浮框评论-->
		<view class="comment_wrap">
			<view class="com_top_wrap">
				<view class="left">
					<text :class="[whoIndex == 0? 'active': '']" @click="chooseWho(0)">回复{{setReplyNum}}</text>
					<text v-if="tieType == 0" :class="[whoIndex == 1? 'active': '']" @click="chooseWho(1)">只看楼主</text>
				</view>
				<view class="right">
					<text :class="[sortType == 1? 'active': '']" @click="chooseType(1)">最新</text>
					<text :class="[sortType == 0? 'active': '']" @click="chooseType(0)">最早</text>
					<text :class="[sortType == 2? 'active': '']" @click="chooseType(2)">最热</text>
				</view>
			</view>
			<scroll-view class="com_scrollY" scroll-y="true" @scroll="scroll" :scroll-top="scrollTop"
				@scrolltolower="loadMore()" scroll-with-animation="true">
				<view class="noCom" v-if="comList.length<=0">
					<image class="img" src="../../static/image/page/noCom.png" mode="aspectFit"></image>
					<view>暂无评论</view>
				</view>
				<!--评论组件-->
				<comment ref="comment" v-else :parComList="comList" @addComent="addCom" @openChilCom="openChilCom">
				</comment>
				<view class="loading-more" v-if="this.comPages>1">
					<text class="loading-more-text">{{loadText}}</text>
				</view>
			</scroll-view>
		</view>

		<!--start 二级评论-->
		<uni-popup ref="popupCom" type="bottom">
			<comChild ref="comChild" v-if="comChildList.length>0" :parComList="comChildList" @addComent="addCom"
				@thumupPar="thumupPar" @loadChildMore="loadChildMore" @closeChildPop="closeChildPop"
				:choseArr="choseArr" :comChildListIndex="comChildListIndex" :comChildPages="comChildPages"
				:comChildLoadText="comChildLoadText"></comChild>
		</uni-popup>
		<!--end 二级评论-->

		<!--startnd 发表评论弹窗-->
		<uni-popup ref="popup" type="bottom" @change="changePop">
			<view class="popup_reply" v-if="popShow">
				<view class="reply_imgWrap" v-if="imageList.length">
					<view class="img_wrap" v-for="(item, index) in imageList" :key="index">
						<image class="img" :src="item" mode="aspectFill"></image>
						<text class="uniicons del_btn" @click="deleteImg(index)">&#xe460;</text>
					</view>
				</view>
				<textarea class="replay_main" focus="true" :placeholder="placeholder" maxlength="-1" v-model="content"
					confirm-type="send" @confirm="sendToPost"></textarea>
				<view class="reply_btn">
					<view>
						<text class="reply_img uniicons" @click="chooseImg">&#xe363;</text>
					</view>
					<view>
						<button class="reply_submit" @click="sendToPost()">发送</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<!--end发表评论弹窗-->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import comment from '@/components/comment/comment.vue';
	import comChild from './child/comChild.vue'
	import baseURL from "@/common/config.js"
	import {
		uploadImgsList
	} from "@/common/util.js"
	export default {
		name: "discussFixed",
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			comment,
			comChild
		},
		data() {
			return {
				whoIndex: 0,
				number: 3,
				imageList: [],
				content: "",
				popShow: true,
				setPraise: null,
				setPraiseNum: null,
				setReplyNum: this.replyNum,
				isPost: null,
				comList: [],
				comPages: 0,
				comPagesNum: 0,
				childIndex: 0,
				loadText: "加载更多...",

				choseArr: {},
				comChildListIndex: 0,
				comChildList: [],
				comChildPages: 0,
				comChildPagesNum: 0,
				comChildLoadText: "加载更多...",
				childSortId: 0,

				placeholder: "说说你的想法",
				pid: 0,
				sortId: 0,
				eid: 0,
				//排序ID
				sortType: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};
		},
		watch: {
			popShow(val) {
				if (!val) {
					this.imageList = [],
						this.content = ""
				}
			},
			isPraise: {
				handler(v) {
					this.setPraise = v ? true : false
				},
				immediate: true
			},
			praiseNum: {
				handler(v) {
					this.setPraiseNum = v;
				},
				immediate: true
			}
		},
		computed: {
			//是否点过赞
			hasPraise: {
				get() {
					return this.setPraise
				},
				set(v) {
					this.setPraise = v
				}
			},
			//点赞数量
			hasPraiseNum: {
				get() {
					return this.setPraiseNum
				},
				set(v) {
					this.setPraiseNum = v
				}
			}
		},
		props: {
			//文章ID
			forumId: {
				type: [Number],
				default: 0
			},
			//是否点过赞
			isPraise: {
				type: [Number],
				default: 0
			},
			//评论数量
			replyNum: {
				type: [Number],
				default: 0
			},
			//点赞数量
			praiseNum: {
				type: [Number],
				default: 0
			},
			//帖子类型
			tieType: {
				type: [Number],
				default: 0
			}
		},
		created() {
			this.getComList({
				forumId: this.forumId,
				sortId: this.sortId,
				sortType: this.sortType,
				eid: this.eid,
				type: this.tieType
			})
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//关闭弹窗
			closeChildPop() {
				this.$refs.popupCom.close()
			},
			//二级弹窗点赞
			thumupPar(par) {
				this.$refs.comment.thumup(this.comChildListIndex, par)
			},
			//选择查看谁
			chooseWho(num) {
				this.whoIndex = num
				this.eid = num
				let formData = {
					forumId: this.forumId,
					sortId: this.sortId,
					sortType: this.sortType,
					type: this.tieType,
					eid: this.eid
				}
				this.getComList(formData)
			},
			//选择最早最热最新
			chooseType(num) {
				this.sortType = num
				this.sortId = 0
				let formData = {
					forumId: this.forumId,
					sortId: this.sortId,
					sortType: this.sortType,
					type: this.tieType,
					eid: this.eid
				}
				this.getComList(formData)
			},
			//打开二级评论
			openChilCom(obj) {
				let parmas = {
					forumId: this.forumId,
					pid: obj.id,
					type: this.tieType,
					sortType: this.sortType,
				};
				this.comChildListIndex = obj.index;
				this.choseArr = this.comList[obj.index];
				this.childSortId = this.choseArr.listForumCommentPageVo[0].id;
				parmas.sortId = this.choseArr.listForumCommentPageVo[0].id;
				this.getComChildList(parmas);
				this.$refs.popupCom.open();
			},
			//查询二级评论
			getComChildList(obj) {
				this.$api.getComList(obj).then(res => {
					let resData = res.data.data;
					this.comChildPages = resData.pages;
					this.comChildPagesNum = resData.current;
					this.comChildList = resData.records;
				})
			},
			//查询更多的二级评论
			loadChildMore() {
				if (this.comChildPagesNum >= this.comChildPages) {
					this.comChildLoadText = "没有更多数据了";
					return;
				}
				let pageNo = this.comChildPagesNum + 1;
				let parmas = {
					pageNo: pageNo,
					sortId: this.childSortId,
					forumId: this.forumId,
					pid: this.choseArr.id,
					sortType: this.sortType,
					type: this.tieType
				};
				this.getComChildListM(parmas);
			},
			getComChildListM(obj) {
				this.$api.getComList(obj).then(res => {
					let resData = res.data.data;
					this.comChildPages = resData.pages;
					this.comChildPagesNum = resData.current;
					this.comChildList = this.comChildList.concat(resData.records);
				})
			},
			//回复评论
			addCom(obj) {
				let resObj = {}
				resObj.tie = false
				resObj.pid = obj.id
				this.pid = obj.id
				this.childIndex = obj.index
				resObj.placeholder = "回复给" + obj.name;
				this.openSend(resObj)
			},
			//查询一级评论
			getComList(obj) {
				this.$api.getComList(obj).then(res => {
					let resData = res.data.data
					this.comPages = resData.pages
					this.comPagesNum = resData.current
					this.comList = resData.records
					if (this.sortType == 1) {
						this.sortId = this.comList[0] ? this.comList[0].id : 0
					} else {
						this.sortId = 0
					}
					this.scrollTop = this.old.scrollTop
					this.$nextTick(function() {
						this.scrollTop = 0
					});
				})
			},
			//获取更多评论
			loadMore() {
				if (this.comPagesNum >= this.comPages) {
					this.loadText = "没有更多数据了";
					return;
				}
				let pagesNo = this.comPagesNum + 1;
				let parmas = {
					pageNo: pagesNo,
					forumId: this.forumId,
					sortType: this.sortType,
					sortId: this.sortId,
					type: this.tieType
				};
				this.getComListMore(parmas);
			},

			//获取更多的评论
			getComListMore(obj) {
				this.$api.getComList(obj).then(res => {
					let resData = res.data.data;
					this.comPages = resData.pages;
					this.comPagesNum = resData.current;
					this.comList = this.comList.concat(resData.records);
				})
			},
			//底部填写评论的弹框状态
			changePop(res) {
				this.popShow = res.show;
			},
			//点赞
			thumup() {
				let that = this;
				this.$api.praiseForum({
					id: this.forumId,
					type: this.tieType
				}).then(res => {
					that.setPraise = !that.setPraise;
					that.setPraiseNum = that.setPraise ? that.setPraiseNum + 1 : that.setPraiseNum - 1;
				}).catch(() => {})

			},
			//打开底部回复窗口
			openSend(obj) {
				let isTie = obj.tie;
				this.isPost = isTie;
				this.placeholder = obj.placeholder;
				this.$refs.popup.open();
			},
			//选择图片
			chooseImg() {
				let that = this;
				let checkNumber = this.number - this.imageList.length;
				uni.chooseImage({
					count: checkNumber,
					sourceType: ['album', 'camera'],
					success: res => {
						if (checkNumber <= 0) {
							uni.showToast({
								title: "最多选择三张照片",
								icon: 'none'
							})
						} else {
							let count = checkNumber <= res.tempFilePaths.length ? checkNumber : res
								.tempFilePaths.length
							for (let i = 0; i < count; i++) {
								that.imageList.push(res.tempFilePaths[i])
							}
						}
					}
				})
			},
			//删除图片
			deleteImg(index) {
				const removeItem = (item, i) => item.slice(0, i).concat(item.slice(i + 1, item.length));
				this.imageList = removeItem(this.imageList, index);
			},
			//发送评论
			//回复帖子的方法
			sendToPost() {
				let formData = {};
				formData.content = this.content;
				formData.forumId = this.forumId;
				formData.type = this.tieType;
				let imgLength = this.imageList.length;
				if (this.isPost) {
					delete formData.pid;
				} else {
					formData.pid = this.pid;
				}
				//判断是否包含附件
				if (imgLength) {
					uni.showLoading({
						title: "上传中",
						mask: true,
					})
					let imgs = this.imageList.map((value, index) => {
						return {
							index: index,
							uri: value,
						}
					})
					this.uploadFile(imgs, formData, "/program/comment/addComment");
				} else {
					//不带附件
					this.uploadNoFile(formData);
				}
			},
			//上传附件方法
			//上传带附件的
			uploadFile(imgs, formData, url) {
				uploadImgsList(imgs, formData, url).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
						let data = res.data;
						//判断是否评论的一级评论
						this.judgeCom(data)
						this.$refs.popup.close()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: err.message,
						icon: 'none',
					})
				})
			},
			//上传不带附件的
			uploadNoFile(formData) {
				this.$api.addForumCom(formData).then(res => {
					uni.showToast({
						title: '发送成功',
						icon: 'none',
					});
					let data = res.data.data;
					//判断是否评论的一级评论
					this.judgeCom(data)
					this.$refs.popup.close()

				}).catch(() => {})
			},
			//判断是否一级评论
			judgeCom(obj) {
				if (obj.replyName) {
					this.comChildList.unshift(obj)
					this.comList[this.comChildListIndex].remnant = this.comList[this.comChildListIndex].remnant + 1;
				} else if (obj.pid) {
					console.log(this.childIndex);
					this.comList[this.childIndex].listForumCommentPageVo.unshift(obj)
					this.comChildList.unshift(obj)
					this.comList[this.childIndex].remnant = obj.remnant;
				} else {
					this.comList.unshift(obj);
					this.setReplyNum = this.setReplyNum + 1
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.bottom_fixed {
		height: 98rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		z-index: 90;

		.wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;

			text {
				font-size: 36rpx;
				color: #333333
			}

			.inpit_wrap {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				background: #F8F8F8;
				border-radius: 34rpx;
				padding: 10rpx 30rpx;

				.input {
					flex: 1;
					margin-left: 20rpx;
					color: #999999;
					font-size: 24rpx;
				}

				text {
					color: #999999
				}
			}

			.right {
				padding: 0 30rpx;

				.icon {
					position: relative;
					width: 100rpx;
					display: inline-block;
					text-align: center;
				}

				.active {
					color: #F96363;
				}

				.num {
					font-size: 24rpx;
					transform: scale(.8, .8);
					color: #F96363;
					position: absolute;
				}
			}
		}

	}

	.popup_reply {
		width: 100%;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		border-radius: 20rpx 20rpx 0 0;

		.reply_imgWrap {
			height: 210rpx;
			border-bottom: 1px solid #EEEEEE;
			width: 100%;
			padding: 20rpx 0;
			margin-bottom: 20rpx;

			.img_wrap {
				height: 100%;
				width: 150rpx;
				margin-right: 30rpx;
				float: left;
				position: relative;
			}

			.img {
				width: 100%;
				height: 100%;
			}

			.del_btn {
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				font-size: 16px;
				background: $dtg-color-primary;
				border-radius: 50%;
				color: white;
			}
		}

		.replay_main {
			height: 150rpx;
			width: 100%;
			background: #F8F8F8;
			border-radius: 10px;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.reply_btn {
			display: flex;
			height: 96rpx;
			justify-content: space-between;
			align-items: center;
		}

		.reply_img {
			font-size: 18px;
			padding-left: 36rpx;
			color: #999999;
		}

		.reply_submit {
			color: #FC4073;
			border: none;
			background: none;
			font-size: 28rpx;
		}

		.reply_submit:after {
			border: none;
		}
	}

	.comment_wrap {
		width: 100%;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;

		.com_top_wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #EEEEEE;
			height: 100rpx;

			.left {
				text {
					font-size: 30rpx;
					font-weight: bold;
					margin-right: 30rpx;
					color: #999999;
					position: relative;
				}

				.active {
					color: #333333
				}

				.active ::after {
					content: "";
					width: 40rpx;
					height: 6rpx;
					background: #31C6DB;
					border-radius: 4rpx;
					position: absolute;
					bottom: -16rpx;
					left: calc(50% - 20rpx);
				}
			}

			.right {
				width: 260rpx;
				height: 54rpx;
				background: #F8F8F8;
				border-radius: 27rpx;
				color: #999999;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 22rpx;

				.active {
					background: #FFFFFF;
					border: 1px solid #31C6DB;
					border-radius: 19rpx;
					padding: 0 10rpx;
					color: #31C6DB;
				}
			}
		}

		.com_scrollY {
			width: 100%;
			max-height: 60vh;

			.loading-more {
				align-items: center;
				justify-content: center;
				padding-top: 10px;
				padding-bottom: 10px;
				text-align: center;
			}

			.loading-more-text {
				font-size: 28rpx;
				color: #999;
			}
		}

		.noCom {
			text-align: center;
			color: #999999;
			padding: 30rpx;

			.img {
				width: 408rpx;
				height: 290rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>
